import {Card, CardActionArea, CardActions, CardContent, CardMedia, Skeleton, Typography} from "@mui/material";
import React, {useEffect} from "react";
import {Navigate} from "react-router-dom";

export default function AlbumCard(props) {
    const {img,name:n,id,auth:a,loading,from} = props;
    let [imgUrl, setImgUrl] = React.useState(img);
    const [name, setName] = React.useState(n);
    const [auth, setAuth] = React.useState(a);
    const [go, setGo] = React.useState(false);
    if(n !== name){
        setName(n)
    }
    if(a !== auth){
        setAuth(a)
    }
    if(img !== imgUrl){
        setImgUrl(img)
    }
    useEffect(async () => {

        // await init()

    },[])
    let fromIcon;
    if(from === "163"){
        fromIcon = './ico163.png';
    }else if(from === "qq"){
        fromIcon = './icoqq.png';
    }
    else if(from === "kugou"){
        if(imgUrl){
            imgUrl = imgUrl.replace("{size}","150");
        }

        fromIcon = './icokugou.png';
    }
    else if(from === "migu"){
        fromIcon = './icomigu.png';
    }
    else if(from === "kuwo"){
        fromIcon = './icokuwo.png';
    }
    function errorImg(e){
        e.target.src = '/listico.png'
    }
    function handleClick(){
        //console.log(id,name,auth,from)
        setGo(true);
    }
    return (
        <div>
            <Card sx={{ minWidth:245,maxWidth: 245,marginTop:1 }}>
                <CardActionArea onClick={handleClick}>
                    {loading ? (
                        <Skeleton sx={{ height: 220 , width:300}} animation="wave" variant="rectangular" />
                    ) : (
                        <CardMedia
                            component="img"
                            height="194"
                            image={imgUrl}
                            alt="face"
                            onError={errorImg}

                        />)}
                    <CardContent>
                        {loading ? (
                            <React.Fragment>
                                <Skeleton animation="wave" height={20} style={{ marginBottom: 6 }} />
                                <Skeleton animation="wave" height={20} style={{ marginBottom: 10 }} />
                                <Skeleton animation="wave" height={10} width="80%" />
                            </React.Fragment>
                        ) : (
                            <>
                                <Typography height='64px' gutterBottom variant="h6" component="div">
                                    {name}
                                </Typography>
                                <Typography variant="body2" color="text.secondary">
                                    {"by  "+auth}
                                </Typography>
                            </>
                        )
                        }
                    </CardContent>
                </CardActionArea>
                <CardActions disableSpacing>
                    {
                        loading ? (
                            <Skeleton animation="wave" variant="circular" width={16} height={16} />
                        ) : (
                            <img src={fromIcon} width='16px' height='16px'/>
                        )
                    }
                </CardActions>
            </Card>
            {go?<Navigate to='/albumDetail' state={{id:id,from:from,auth:auth,name:name,imgUrl:imgUrl}}/>:""}
        </div>
    )

}
